{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">🩺</div>
      <div>
        <h1 class="h1" style="margin:0">Services</h1>
        <div class="small">Create and manage service cards shown on the public website.</div>
      </div>
      <div style="margin-left:auto">
        <a class="btn" href="{% url 'website:staff_service_create' %}">＋ New Service</a>
      </div>
    </div>
    <div class="sep"></div>

    {% if services %}
      <div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px">
        {% for s in services %}
          <div class="card" style="padding:14px">
            <div style="display:flex;gap:10px;align-items:flex-start">
              <div style="font-size:22px">{{ s.icon }}</div>
              <div style="min-width:0">
                <div style="font-weight:700">{{ s.title }}</div>
                <div class="small" style="opacity:.85">{{ s.short_description|truncatechars:120 }}</div>
                <div class="small" style="margin-top:6px;opacity:.75">Slug: {{ s.slug }}</div>
              </div>
            </div>
            <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap">
              <a class="btn" href="{% url 'website:staff_service_edit' s.id %}">Edit</a>
              <a class="btn btn-danger" href="{% url 'website:staff_service_delete' s.id %}">Delete</a>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="small">No services yet.</div>
    {% endif %}
  </div>
</section>
{% endblock %}